<template>
  <a-drawer
    v-model:open="store.openDrawer"
    class="drawer"
    width="800px"
    :title="store.editFlag ? '编辑职位' : '详情'"
    placement="right"
    :closable="false"
  >
    <template #extra>
      <a-icon type="icon-CloseButton" class="icon" @click="handleClose"></a-icon>
    </template>
    <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
      <!-- 用户名 -->
      <a-form-item label="用户名">
        <a-input
          v-model:value="formData.userName"
          placeholder="请输入用户名"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 年龄 -->
      <a-form-item label="年龄">
        <a-input
          v-model:value="formData.age"
          placeholder="请输入年龄"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 教育背景 -->
      <a-form-item label="教育背景">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.bg"
          placeholder="请选择教育背景"
          :disabled="!store.editFlag"
        >
        </a-input>
        <a-select
          v-else
          v-model:value="formData.bg"
          placeholder="请选择教育背景"
          :disabled="!store.editFlag"
        >
          <a-select-option value="高中及以下">高中及以下</a-select-option>
          <a-select-option value="大专">大专</a-select-option>
          <a-select-option value="本科">本科</a-select-option>
          <a-select-option value="硕士及以上">硕士及以上</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 描述 -->
      <a-form-item label="描述">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.description"
          placeholder="请输入描述"
          :disabled="!store.editFlag"
        />
        <a-textarea
          v-else
          v-model:value="formData.description"
          placeholder="请输入描述"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 应往届 -->
      <a-form-item label="应往届">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.gen"
          placeholder="请选择应往届"
          :disabled="!store.editFlag"
        >
        </a-input>
        <a-select
          v-else
          v-model:value="formData.gen"
          placeholder="请选择应往届"
          :disabled="!store.editFlag"
        >
          <a-select-option value="应届">应届</a-select-option>
          <a-select-option value="往届">往届</a-select-option>
        </a-select>
      </a-form-item>
      <!-- ID -->
      <a-form-item label="ID">
        <a-input v-model:value="formData.id" placeholder="请输入ID" :disabled="!store.editFlag" />
      </a-form-item>
      <!-- 级别 -->
      <a-form-item label="级别">
        <a-input
          v-model:value="formData.level"
          placeholder="请输入级别"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 工作地 -->
      <a-form-item label="工作地">
        <a-input
          v-model:value="formData.location"
          placeholder="请输入工作地"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 专业 -->
      <a-form-item label="专业">
        <a-input
          v-model:value="formData.major"
          placeholder="请输入专业"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 性别 -->
      <a-form-item label="性别">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.sex"
          placeholder="请选择性别"
          :disabled="!store.editFlag"
        >
        </a-input>
        <a-select
          v-else
          v-model:value="formData.sex"
          placeholder="请选择性别"
          :disabled="!store.editFlag"
        >
          <a-select-option value="男">男</a-select-option>
          <a-select-option value="女">女</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 标签 -->
      <a-form-item label="标签">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.tags"
          placeholder="请选择标签"
          :disabled="!store.editFlag"
        >
        </a-input>
        <a-select
          v-else
          v-model:value="formData.tags"
          mode="multiple"
          placeholder="请选择标签"
          :disabled="!store.editFlag"
        >
          <a-select-option v-for="tag in availableTags" :key="tag" :value="tag">{{
            tag
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 电话号码 -->
      <a-form-item label="电话号码">
        <a-input
          v-model:value="formData.telNum"
          placeholder="请输入电话号码"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 用户ID -->
      <a-form-item label="用户ID">
        <a-input
          v-model:value="formData.userId"
          placeholder="请输入用户ID"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 操作按钮 -->
    </a-form>
    <div v-if="store.editFlag" class="button-group">
      <a-button type="primary" class="edit-button" @click="addInfo">提交</a-button>
      <a-button class="reset-button" @click="reset">重置</a-button>
    </div>
  </a-drawer>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import server from '@/api/index'
import { usePositionStore } from '@/stores/positionStore'
import { useUserStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

const store = usePositionStore()
const userStore = useUserStore()
// 表单数据
const formData = ref({
  userName: '',
  age: '',
  bg: '',
  description: '',
  gen: '',
  id: '',
  level: '',
  location: '',
  major: '',
  sex: '',
  tags: [],
  telNum: '',
  userId: '',
})

// 可供选择的职位标签
const availableTags = ['Java', 'Python', '前端开发', '后端开发', '数据分析', '高并发', '分布式']

const handleClose = () => {
  store.openDrawer = false
  store.editFlag = false
  store.editData = {}
  store.addFlag = false
}
const addInfo = () => {
  if (store.addFlag && store.editFlag) {
    addPosition()
  } else if (!store.addFlag && store.editFlag) {
    editPosition()
  }
}

const reset = () => {
  formData.value = { ...store.editData }
}

const addPosition = async () => {
  let params = {
    userName: formData.value.userName,
    age: formData.value.age,
    bg: formData.value.bg,
    description: formData.value.description,
    gen: formData.value.gen,
    id: formData.value.id,
    level: formData.value.level,
    location: formData.value.location,
    major: formData.value.major,
    sex: formData.value.sex,
    tags: formData.value.tags,
    telNum: formData.value.telNum,
    userId: formData.value.userId,
  }
  try {
    const res = await server.addPosition({
      ...params,
    })
    if (res.data.code === 0) {
      message.success(res.data.message)
      store.openDrawer = false
      if (store.positionFlag) {
        store.getMyPositionList(userStore.userAccount)
      } else {
        store.getAllPositionList()
      }
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}

const editPosition = async () => {
  let params = {
    id: store.editData.id,
    userName: formData.value.userName,
    age: formData.value.age,
    bg: formData.value.bg,
    description: formData.value.description,
    gen: formData.value.gen,
    level: formData.value.level,
    location: formData.value.location,
    major: formData.value.major,
    sex: formData.value.sex,
    tags: formData.value.tags,
    telNum: formData.value.telNum,
    userId: formData.value.userId,
  }
  try {
    const res = await server.editPosition({
      ...params,
    })
    if (res.data.code === 0) {
      message.success(res.data.message)
      store.openDrawer = false
      if (store.positionFlag) {
        store.getMyPositionList(userStore.userAccount)
      } else {
        store.getAllPositionList()
      }
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}

watch(
  () => store.openDrawer,
  val => {
    if (val) {
      formData.value = { ...store.editData }
    }
  },
)
</script>

<style lang="scss" scoped>
.icon {
  font-size: 14px;
  cursor: pointer;
}

.button-group {
  display: flex;
  justify-content: space-between;
  width: 93%;
  margin-top: 20px;
  margin-left: 23px;

  .edit-button {
    width: 200px;
  }

  .reset-button {
    width: 200px;
  }
}

:deep(.ant-input-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-input > input[disabled]) {
  color: #000;
}
</style>
